<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设置input的placeholder的字体样式</title>
  <style>
    /* -webkit  -moz -ms   */
    /* 如果是工程化项目, 可以使用postcss自动添加前缀 */

    input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: red;
    }

    input::-moz-placeholder {
      /* Firefox 19+ */
      color: red;
    }

    input:-ms-input-placeholder {
      /* IE 10+ */
      color: red;
    }

    input:-moz-placeholder {
      /* Firefox 18- */
      color: red;
    }

    input::placeholder {
      color: pink;
    }



    /* 设置input聚焦时的样式 */
    input:focus {
      background-color: orange;
    }

    /* 取消input的边框 */
    input {
      border: none;
      outline: none;
    }
  </style>
</head>

<body>
<!-- 设置input的placeholder的字体样式  -->
<input type="text" placeholder="请设置用户名">


</body>

</html>
